<template>
  <div class="seatiaoz">
    <div class="title">
      <div class="top">
        <div class="back"><van-icon name="arrow-left" size="30px" @click="back()" /></div>
        <div class="search">
          <van-search @update:model-value="searchInputChange()"  @input="getValue" v-model="value" placeholder="白萝卜" color="white" />
        </div>
        <div class="text"><p>搜索</p></div>
      </div>
      <!-- <div class="history">
        <div class="histxt">历史搜索</div>
        <div class="delect"><van-icon name="delete-o" size="20px" /></div>
      </div> -->
      <!-- <div class="content">
        <div class="alltext">
          <div class="hisalltx">虫草煲老鸭汤</div>
          <div class="hisalltx">没有羊膻味的清炖羊肉</div>
        </div>
      </div> -->
      <div v-if="value==''">
        <div class="hot">
        <div class="hottxt">热门搜索</div>
      </div>

      <div class="hotcontent">
        <div class="alltexthot"  >
          <div class="hisalltxhot"  @click="Clicksearch()" v-for="(item,index) in productDataact " :key="index" >{{item.title}}</div>
       
        </div>
      </div>
      </div>
    </div>

    <div v-if="value!==''" class="searchskip">
        <div class="seachname" v-for="(item,index) in productSearch " :key="index" >
          <div class="sena" @click="Clicksearch(item.name)" >
              {{item.name}}
          </div>    
           <!-- <div class="hotbtn">
             {{item.tag.name}}
           </div>     -->
        </div>
    </div>
  </div>
</template>

<script>
// import { Console } from 'console';

export default {
  name: "Seatiaoz",
  data() {
    return {
        count: 10,
        isLoading: false,
         //热门的内容
        productDataact:[],
        //搜索的内容
        productSearch:[],
      
        tabIndex:0,
   
      
      value: "",
        productListRst:[], //产品列表
     //   productListRst:{},//搜索筛选之后的列表
    };
  },
  created() {
    this.GetRecommend();
    // console.log(this.value);
    this.Getsearch();
  },
  methods: {
    //默认返回上一级
    back() {
      this.$router.push({ name:"Home"});
    },

    getValue(){
        let va = this.value;
        console.log('这个是value',va);
        this.Getsearch(va)
    },

    GetRecommend(){
        this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/recipe/search/hot`,
        //get请求参数写在params中
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          offset: "0",
          limit: "20",
        },
      })
        .then((result) => {
          // console.log("result==>", result);
          if (result) {
            
          }
          this.productDataact = result.data.result.suggestdetails;
          this.productDataaend = result.data.list;
          
          console.log(" this.productDataact==>", this.productDataact);
   
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });
    },


    Getsearch(va){
        this.axios({
        method: "get",
        url: `https://apis.netstart.cn/douguo/recipe/search/suggests?kw=${va}`,
        // //get请求参数写在params中
        // query: {
        //   appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        //   // kw:"土豆"
        // //   offset: "0",
        // //   limit: "20",
        // },
      })
        .then((result) => {
          // console.log("result==>", result);
          if (result) {
            
          }
          this.productSearch = result.data.result.suggests;
          
        //   this.productListRst = this.productSearch;
        //   let activity = this.productDataact.filter( (item) => {
        //     return item.type == 1
        //   } )
        //   .map( (item) => {
        //     return item;
        //   })
        //   this.productDataact = activity;
        
        //   console.log("活动的数据==>", activity);
          console.log(" this.productSearch==>", this.productSearch);
              
        // console.log(" this.productListRst==>", this.productListRst)
       
        })
        .catch((err) => {
          console.log("err==>", err); //用来捕获错误

          // console.log("err==>",err);
        });

    
    },

    searchInputChange(value){
        if (null === value || undefined === value ) {
            this.productListRst = this.productSearch 
        }else{
            this.productListRst = [];//结果为空
            let regStr = "";
            //初始化正则
            for (let i = 0; i < value.length; i++) {
                regStr = regStr + "(" + value[i] + ")([\\s]*)"
                
            }
            let reg = new RegExp(regStr);
            console.log("reg==>",reg);
            for (let i = 0; i < this.productSearch.length; i++) {
                let name = this.productSearch[i].name; //按照名字匹配
                let regMatch = name.match(reg);
                if (null !== regMatch) {
                    this.productListRst.push(this.productSearch[i]);
                }
                
                
            }
        }
    },

    Clicksearch(va){
      // console.log(va);
      this.$router.push({ name:"Cliseatex",query:{value:va}});
    }

  },
};
</script>

<style lang="less" scoped>
body {
  background-color: #ffffff !important;
}
.seatiaoz {
  background-color: white;
  height: 100vh;
  .title {
    padding: 20px;
    .top {
      display: flex;
      justify-content: center;
      align-items: center;
      .back {
        padding-right: 10px;
      }
      .search{
        width: 240px;
        border-radius: 10px;
      }

      .text {
        p{
        font-size: 15px;
        width: 30px;
        
        font-weight: 800;
        color: #606060;
        }
      }
    }
    .history {
      padding-top: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .histxt {
        font-size: 18px;
        font-weight: 900;
        color: #2f2f2f;
      }
      .delect {
        margin-right: 6px;
      }
    }
    .content {
      padding-top: 15px;
      .alltext {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-around;

        .hisalltx {
          font-size: medium;
          font-weight: 600;
          color: #828282;
          padding: 8px;
          margin-right: 8px;
          margin-bottom: 8px;
          background-color: #f5f5f5;
          border-radius: 8px;
        }
      }
    }
    .hot {
      font-size: 18px;
      font-weight: 900;
      color: #2f2f2f;
      margin: 16px 0;
    }
    .hotcontent {
      .alltexthot {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        flex-wrap: wrap;
        align-content: space-around;
        .hisalltxhot {
          font-size: medium;
          font-weight: 600;
          color: #828282;
          padding: 8px;
          margin-right: 8px;
          background-color: #f5f5f5;
          border-radius: 8px;
          margin-bottom: 8px;
        }
        .hottext {

        }
      }
    }
  }

  .searchskip{
    height: 100vh;
    background-color: white;
    margin-top: 25px;
    padding: 8px;
    .seachname{
        display: flex;
        justify-content: space-between;
        align-items: center;
       .sena{
         padding-left: 30px;
          font-size: medium;
          font-weight: 800;
          color: #3b3b3b;
       } 
       .hotbtn{
        text-align: end;
        height: 100%;
        border: 2px solid #ffDa59;
         padding: 3px 15px ; 
         border-radius: 15px;
         font-size: small;
         font-weight: 800;
         background-color: #fefbea;
         color: #EA9413;
       }
    }
  }
}
</style>
